<template>
  <!-- 账户信息 -->
  <div>
    <!-- 导航--头部 -->
    <!-- 左上角箭头-返回 我-首页 -->
    <!-- 右上角可进入查看明细 -->
    <van-nav-bar
        title="账户信息"
        left-text=""
        right-text="查看明细"
        left-arrow
        @click-left="$router.push('/my')"
        @click-right="onClickRight"
    />
    <!-- 账户信息显示 -->
    <div class="MyMessage">
      <div class="head">
        <div class="row1">
          <van-icon name="shop-collect-o"/>
          <span class="row1">我的核桃</span>
        </div>
        <div class="row">
          <span class="row">{{ text }}</span>
        </div>
      </div>
      <!-- 充值展示  分三种类型   月卡/半年卡/年卡-->
      <div class="body">
        <div>
          <van-radio-group v-model="radio" class="row">
            <!-- 通过v-for显示充值选项 -->
            <van-radio
                v-for="(item, index) in payList"
                :key="item.id"
                :name="index"
                class="row"
            >
              {{ item.type }} ￥{{ item.money }}
            </van-radio>
          </van-radio-group>
        </div>
        <div class="payMoney">
          <!-- 充值键--跳转到订单详情界面 -->
          <van-button
              type="info"
              :to="{ path: '/PayMoney', query: { payList:payList[radio] } }">
            充值
          </van-button>
          <!-- 充值说明--进入说明界面 -->
          <span @click="ExplainBtn">充值说明</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapGetters} from "vuex";

export default {
  name: "MyMessage",
  computed: {
    ...mapGetters(['userMoney'])
  },
  mounted() {
    this.isVip()
  },
  data() {
    return {
      text: '你还不是会员哟！',
      radio: 0,
      payList: [
        //返给后端三条数据：月卡31天，季卡：92天，年卡：365天
        {id: 1, type: "月卡", money: 0.3, day: 31},
        {id: 2, type: "季卡", money: 0.6, day: 92},
        {id: 3, type: "年卡", money: 1, day: 365},
      ],
    };
  },
  methods: {
    //判断是否为会员
    isVip() {
      if (this.userMoney > 0) {
        this.text = '你已是会员啦！'
      }
    },
    //查看明细
    onClickRight() {
      this.$router.push("/Mingxi");
    },
    //充值说明
    ExplainBtn() {
      this.$router.push("/Explain");
    },
  },
};
</script>

<style scoped lang="less">

.head {
  height: 5rem;
  background-color: #1989FA;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .row1 {
    margin-bottom: 0.5rem;
  }
}

.body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px;

  .row {
    margin: 1rem;
  }

  .payMoney {
    display: flex;
    justify-content: right;
    align-items: center;

    button {
      border-radius: 5px;
    }

  }
}

</style>
